<template>
  <div class="filter-result">
    <div class="breadcrumb-link">
      <span @click="fallBack" style="cursor: pointer;">Search Criteria</span>
      <i class="el-icon-arrow-right"></i>
      <span>Search Results</span>
    </div>
    <el-card class="select-module">
      <div class="select-box">
        <h3 style="margin:10px; padding: 0; font-size: 16px; font-family: 'Helvetica Neue'">{{tableName}}</h3>
        <el-collapse-transition>
        <div class="select-content" v-show="selectState">
          <el-row>
            <el-col :span="24">
              <div class="content-box"
                   v-if="conditionParams.prod_build_date || conditionParams.prod_ship_date || conditionParams.prod_register_date || conditionParams.prod_eos_date || conditionParams.billing_date">
                <span class="tag-title">Time:</span>
                <el-tag v-if="conditionParams.prod_build_date" closable @close="clearSearch('prod_build_date')">
                  Build Date：
                  <span>{{conditionParams.prod_build_date.value[0]}}~{{conditionParams.prod_build_date.value[1]}}</span>
                </el-tag>
                <el-tag v-if="conditionParams.prod_ship_date" closable @close="clearSearch('prod_ship_date')">
                  Ship Date:
                  <span >{{conditionParams.prod_ship_date.value[0]}}~{{conditionParams.prod_ship_date.value[1]}}</span>
                </el-tag>
                <el-tag v-if="conditionParams.prod_register_date" closable
                        @close="clearSearch('prod_register_date')">
                  Register Date:
                  <span>{{conditionParams.prod_register_date.value[0]}}~{{conditionParams.prod_register_date.value[1]}}</span>
                </el-tag>
                <el-tag v-if="conditionParams.prod_eos_date" closable @close="clearSearch('prod_eos_date')">
                End of Service Date:
                  <span>{{conditionParams.prod_eos_date.value[0]}}~{{conditionParams.prod_eos_date.value[1]}}</span>
              </el-tag>
                <el-tag v-if="conditionParams.billing_date" closable @close="clearSearch('billing_date')">
                  Billing Date:
                  <span>{{conditionParams.billing_date.value[0]}}~{{conditionParams.billing_date.value[1]}}</span>
                </el-tag>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="content-box"
                   v-if="conditionParams.ship_to_country || conditionParams.sales_geography || conditionParams.customer_account_country || conditionParams.customer_account_region || conditionParams.customer_account_city">
                <span class="tag-title">Geography:</span>
                <el-tag v-if="conditionParams.ship_to_country" closable @close="clearSearch('ship_to_country')">
                  Ship to Country:{{conditionParams.ship_to_country.value}}
                </el-tag>
                <el-tag v-if="conditionParams.sales_geography" closable @close="clearSearch('sales_geography')">
                  Sales Geography:{{conditionParams.sales_geography.value}}
                </el-tag>
                <el-tag v-if="conditionParams.customer_account_country" closable @close="clearSearch('customer_account_country')">
                  Account Country:{{conditionParams.customer_account_country.value}}
                </el-tag>
                <el-tag v-if="conditionParams.customer_account_region" closable @close="clearSearch('customer_account_region')">
                  Account Region:{{conditionParams.customer_account_region.value}}
                </el-tag>
                <el-tag v-if="conditionParams.customer_account_city" closable @close="clearSearch('customer_account_city')">
                  Account City:{{conditionParams.customer_account_city.value}}
                </el-tag>
                <!--<i class="iconfont icon-guanbi" @click="clearGeographySearch"></i>-->
              </div>
            </el-col>
            <el-col :span="24">
              <div class="content-box"
                   v-if="conditionParams.customer_id || conditionParams.customer_id || conditionParams.customer_id">
                <span class="tag-title">Customer ID/Name:</span>
                <!--情况一-->
                <el-tag v-if="conditionParams.customer_id" closable @close="clearSearch('customer_id')">
                  Customer ID:{{conditionParams.customer_id.value}}
                </el-tag>
                <!--情况二-->
                <el-tag v-if="conditionParams.customer_group_name" closable @close="clearSearch('customer_group_name')">
                  Group Name:{{conditionParams.customer_group_name.value}}
                </el-tag>
                <el-tag v-if="conditionParams.customer_account_name" closable @close="clearSearch('customer_account_name')">
                  Account Name:{{conditionParams.customer_account_name.value}}
                </el-tag>
                <!--<i class="iconfont icon-guanbi" @click="clearBpSearch()"></i>-->
              </div>
            </el-col>
            <el-col :span="24">
              <div class="content-box"
                   v-if="conditionParams.prod_biz_group ||conditionParams.prod_sn || conditionParams.prod_material || conditionParams.prod_group_name || conditionParams.prod_brand_name || conditionParams.prod_series_name || conditionParams.prod_subser_name">
                <span class="tag-title">Product：</span>
                <el-tag v-if="conditionParams.prod_biz_group" closable @close="clearSearch('prod_biz_group')">BG:
                  {{conditionParams.prod_biz_group.value}}
                </el-tag>
                <el-tag v-if="conditionParams.prod_sn" closable @close="clearSearch('prod_sn')">SN:
                  {{conditionParams.prod_sn.value}}
                </el-tag>
                <el-tag v-if="conditionParams.prod_material" closable @close="clearSearch('prod_material')">
                  Material:{{conditionParams.prod_material.value}}
                </el-tag>
                <el-tag v-if="conditionParams.prod_group_name" closable @close="clearSearch('prod_group_name')">
                  Group Name:{{conditionParams.prod_group_name.value}}
                </el-tag>
                <el-tag v-if="conditionParams.prod_brand_name" closable @close="clearSearch('prod_brand_name')">
                  Brand Name:{{conditionParams.prod_brand_name.value}}
                </el-tag>
                <el-tag v-if="conditionParams.prod_series_name" closable @close="clearSearch('prod_series_name')">
                  Series Name:{{conditionParams.prod_series_name.value}}
                </el-tag>
                <el-tag v-if="conditionParams.prod_series" closable @close="clearSearch('prod_series')">
                  Prod series {{conditionParamsOpt.productSeriesOpt}}{{conditionParams.prod_series.value}}
                </el-tag>
                <el-tag v-if="conditionParams.prod_subser_name" closable @close="clearSearch('prod_subser_name')">
                  Subset Name：{{conditionParams.prod_subser_name.value}}
                </el-tag>
                <!--<i class="iconfont icon-guanbi" @click="clearProductSearch()"></i>-->
              </div>
            </el-col>
            <el-col :span="24">
              <div class="content-box"
                   v-if="conditionParams.sales_order_num || conditionParams.billing_num ">
                <span class="tag-title">Transaction：</span>
                <el-tag v-if="conditionParams.sales_order_num" closable @close="clearSearch('sales_order_num')">
                  Sales Order Num:{{conditionParams.sales_order_num.value}}
                </el-tag>
                <el-tag v-if="conditionParams.billing_num" closable @close="clearSearch('billing_num')">
                  Billing Num:{{transaction.billing_num.value}}
                </el-tag>
                <!--<i class="iconfont icon-guanbi" @click="clearTransactionSearch()"></i>-->
              </div>
            </el-col>
          </el-row>
        </div>
        </el-collapse-transition>
        <div class="footer-icon" @click="selectStateChange">
          <i :class="[!selectState?'el-icon-caret-bottom':'el-icon-caret-top']"> {{!selectState?'Criteria':''}} </i>
        </div>
      </div>
    </el-card>
    <el-card class="result-table">
      <!--<div v-if="this.toggle === 'transaction'">-->
        <!--<el-button type="primary" @click="submitState" style="position: absolute; top: 150px; right: 5px">-->
          <!--{{$t('filterResult.submit')}}-->
        <!--</el-button>-->
      <!--</div>-->
      <div class="result-header">
        <div style="position: absolute;right: 20px">
          <div class="create-div">
            <el-button class="export-button" type="primary" @click="createModule">{{$t('filterResult.createTemplate1')}}</el-button>
            <el-select v-model="templateName1" :placeholder="$t('filterResult.checkTemplate')" @change="templateChange" clearable>
              <el-option
                v-for="item in moduleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="export-div">
            <el-button class="export-button" type="primary" v-if="showExport"  @click="exportMethods" :loading="showExportLoading">{{$t('filterResult.export')}}</el-button>
            <el-button class="down-button" type="primary" v-else><a :href="exportExcelFileName" style="display: inline-block; width: 70px; height: 40px; line-height: 40px;">{{$t('filterResult.download')}}</a></el-button>
          </div>
        </div>
        <el-input v-model="filterTab.search" size="mini" suffix-icon="el-icon-search" placeholder="Global filter" style="width: 200px"></el-input>
      </div>
      <ag-grid-vue
        v-loading="filterTab.tabLoading"
        style="width: 100%; height: calc(100vh - 380px);" class="ag-theme-balham"
        :gridOptions="transactionOptions"
        :enableColResize="true"
        :enableSorting="true"
        :enableFilter="true"
        :groupHeaders="false"
        :suppressRowClickSelection="true"
        :toolPanelSuppressGroups="false"
        :toolPanelSuppressValues="false">
      </ag-grid-vue>
      <el-table
        v-show="false"
        v-if="toggle === 'transaction'"
        v-loading="filterTab.tabLoading"
        :data="filterTab.filterTabData"
        style="width: 100%"
        :height="tabHeight"
        border
        highlight-current-row
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column
          v-if="tableCheckbox.tableItem.bpId"
          prop="bp_num"
          label="BP ID"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.bpName"
          prop="bp_name"
          label="BP Name"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.group"
          prop="account"
          label="Group"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.geo"
          prop="geo"
          label="Geo"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.region"
          prop="region"
          label="Region"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.country"
          prop="country_name"
          label="Country"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.industry"
          prop="industry"
          label="Industry"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.nielsonId"
          prop="sold_to_nielsen_id"
          label="Nielson ID"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.loyalty"
          prop="loyalty"
          label="Loyalty"
          sortable
          min-width="100">
        </el-table-column>
        <!--<el-table-column-->
        <!--prop="gp_size"-->
        <!--label="Scale"-->
        <!--sortable-->
        <!--min-width="100">-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
        <!--prop="cross_buy"-->
        <!--label="Cross Buy"-->
        <!--sortable-->
        <!--min-width="120">-->
        <!--</el-table-column>-->
        <el-table-column
          v-if="tableCheckbox.tableItem.bu"
          prop="final_bu"
          label="BU"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.brand"
          prop="product_brand"
          label="Brand"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.productSeries"
          prop="product_series"
          label="Product series"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.productFamily"
          prop="ph_code_product"
          label="Product family"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.material"
          prop="material_num"
          label="Material"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.sn"
          prop="machine_seq"
          label="SN"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.segment"
          prop="segment"
          label="Segment"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.so"
          prop="so_num"
          label="SO"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.billing"
          prop="billing_num"
          label="Billing"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.ca"
          prop="qty_real"
          label="CA"
          sortable
          min-width="100">
        </el-table-column>
        <!--特殊-->
        <!--<el-table-column-->
        <!--v-if="tableCheckbox.tableItem.revenue"-->
        <!--prop="sdrev"-->
        <!--label="Revenue($)"-->
        <!--sortable-->
        <!--min-width="120">-->
        <!--</el-table-column>-->
        <el-table-column
          v-if="filterTab.permissions.sdrev"
          prop="sdrev"
          label="Revenue($)"
          sortable
          min-width="120">
        </el-table-column>
        <!--特殊-->
        <!--特殊-->
        <!--<el-table-column-->
        <!--v-if="tableCheckbox.tableItem.gp"-->
        <!--prop="gp"-->
        <!--label="GP($)"-->
        <!--sortable-->
        <!--min-width="100">-->
        <!--</el-table-column>-->
        <el-table-column
          v-if="filterTab.permissions.gp"
          prop="gp"
          label="GP($)"
          sortable
          min-width="100">
        </el-table-column>
        <!--特殊-->
        <!--特殊-->
        <!--<el-table-column-->
        <!--v-if="tableCheckbox.tableItem.gp_per"-->
        <!--prop="gp_per"-->
        <!--label="GP%"-->
        <!--sortable-->
        <!--min-width="100">-->
        <!--</el-table-column>-->
        <el-table-column
          v-if="filterTab.permissions.gp_per"
          prop="gp_per"
          label="GP%"
          sortable
          min-width="100">
        </el-table-column>
        <!--特殊-->
        <el-table-column
          v-if="filterTab.permissions.bmc"
          prop="bmc"
          label="BMC"
          sortable
          min-width="120">
        </el-table-column>
        <!--新增-->
        <el-table-column
          v-if="tableCheckbox.tableItem.billingItem"
          prop="billing_item"
          label="Billing Item"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.billingDate"
          prop="billing_date"
          label="Billing Date"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.distrChan"
          prop="distr_chan"
          label="Distribution Channel"
          sortable
          min-width="170">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.productGroup"
          prop="division"
          label="Product Group"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.billCreateDate"
          prop="bill_createdate"
          label="Bill create date"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.firstSell"
          prop="product_date"
          label="First Sell In Date"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.materialDesc"
          prop="material_describe"
          label="Material Description"
          sortable
          min-width="170">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.countryName"
          prop="country_code"
          label="Sell-in Country Name"
          sortable
          min-width="170">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.productHierachy"
          prop="ph_code"
          label="Product Hierachy"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.businessGroup"
          prop="biz_grp"
          label="Business Group"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.pcaCost"
          prop="pcacost"
          label="PCA Cost"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.dmu"
          prop="zdmu"
          label="DMU"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.fiscper"
          prop="fiscper"
          label="Fiscal Year / Period"
          sortable
          min-width="170">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.fisquar"
          prop="fis_quarter"
          label="Fiscal Year / Quarter"
          sortable
          min-width="170">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.deliveryNote"
          prop="delivery_num"
          label="Delivery Note"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.deliveryItem"
          prop="delivery_item"
          label="Delivery Note Item"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.deliveryDate"
          prop="delivery_date"
          label="Delivery Note Date"
          sortable
          min-width="160">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.encryptSn"
          prop="encrypt_machine_seq"
          label="Encrypt SN"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.shipDate"
          prop="ship_date"
          label="Ship Date"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.arriveDate"
          prop="arrive_date"
          label="Arrive Date"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.soItem"
          prop="so_item"
          label="SO Item"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.oppId"
          prop="opp_id"
          label="Opportunity ID"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.oppItem"
          prop="zopp_itm"
          label="Opportunity Item"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.quotationNum"
          prop="zquotanum"
          label="Quotation Number"
          sortable
          min-width="160">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.quotationItem"
          prop="zopp_itm"
          label="Quotation Item"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.contractNum"
          prop="contract"
          label="Contract Number"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.contractItem"
          prop="zcon_itm"
          label="Contract Item"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.contractPrice"
          prop="unitprice"
          label="Contract Unit Price"
          sortable
          min-width="160">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.contractTotal"
          prop="totalprice"
          label="Contract Total Price"
          sortable
          min-width="160">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.activationDate"
          prop="event_date"
          label="Activation Date"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.activationCountry"
          prop="activation_country"
          label="Activation Country"
          sortable
          min-width="160">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.activationProvince"
          prop="activation_province"
          label="Activation Province"
          sortable
          min-width="160">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.activationCity"
          prop="activation_city"
          label="Activation City"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.activationSource"
          prop="source"
          label="Activation Source"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.activationQty"
          prop="activation_qty"
          label="Activation Quantity"
          sortable
          min-width="160">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.duration"
          prop="duration"
          label="duration"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.isActivation"
          prop="isact"
          label="Is Activation"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.os"
          prop="os"
          label="OS"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.cpu"
          prop="cpu"
          label="CPU"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.gpu"
          prop="gpu"
          label="GPU"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.hardDiskDrive"
          prop="hdd"
          label="Hard Disk Drive"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.memory"
          prop="memory"
          label="Memory"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.warStartDate"
          prop="wty_start_date"
          label="Warranty Start Date"
          sortable
          min-width="160">
        </el-table-column>
        <el-table-column
          v-if="tableCheckbox.tableItem.warEndDate"
          prop="wty_end_date"
          label="Warranty End Date"
          sortable
          min-width="160">
        </el-table-column>
        <!--新增-->
      </el-table>
      <el-table
        v-show="false"
        v-if="toggle === 'service'"
        v-loading="filterTab.tabLoading"
        :data="filterTab.filterTabData"
        style="width: 100%"
        :height="tabHeight"
        border
        highlight-current-row
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column
          prop="bp_num"
          label="BP ID"
          sortable
          min-width="100">
        </el-table-column
        >
        <el-table-column
          prop="bp_name"
          label="BP Name"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="account"
          label="Group"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="sellin_geo"
          label="Geo"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="sellin_region"
          label="Region"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="country"
          label="Country"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="industry"
          label="Industry"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="sold_to_nielsen_id"
          label="Nielson ID"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="loyalty"
          label="Loyalty"
          sortable
          min-width="100">
        </el-table-column>
        <!--<el-table-column-->
        <!--prop="cross_buy"-->
        <!--label="Cross Buy"-->
        <!--sortable-->
        <!--min-width="120">-->
        <!--</el-table-column>-->
        <el-table-column
          prop="final_bu"
          label="BU"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="product_brand"
          label="Brand"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="product_series"
          label="Product series"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="ph_code_product"
          label="Product family"
          sortable
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="material_num"
          label="Material"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="sn"
          label="Serial Number"
          sortable
          min-width="135">
        </el-table-column>
        <el-table-column
          prop="sellin_date"
          label="Sell In Date"
          sortable
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="zsrv_styp"
          label="Service Type"
          sortable
          min-width="130">
        </el-table-column>
        <el-table-column
          prop="createtime"
          label="Service Date"
          sortable
          min-width="130">
        </el-table-column>
        <el-table-column
          prop="actualservicemode_s"
          label="Service Node"
          sortable
          min-width="130">
        </el-table-column>
        <el-table-column
          prop="coustomaddress_sc"
          label="Service Addr"
          sortable
          min-width="130">
        </el-table-column>
        <el-table-column
          prop="closetime"
          label="Close Date"
          sortable
          min-width="120">
        </el-table-column>
      </el-table>
      <div class="block f-r">
        <el-pagination
          @size-change="prestoSizeChange"
          @current-change="prestoCurrentChange"
          :current-page="conditionParams.page"
          :page-sizes="[50, 100, 200, 500, 1000]"
          :page-size="filterTab.pageSize"
          layout="sizes, prev, pager, next"
          :total="filterTab.total">
        </el-pagination>
      </div>
      <el-dialog custom-class="create-dialog" :visible.sync="dialogCreateModuleVisible" width="60%">
        <div slot="title" style="overflow: hidden">
          <h2>{{$t('filterResult.CreateTemplate')}}</h2>
          <div class="select-template">
            <span style="margin-right: 20px;">{{$t('filterResult.checkTemplate')}}</span>
            <el-select v-model="moduleValue" popper-class="template-select" :placeholder="$t('filterResult.select')" @change="changeTemplate">
              <el-option
                v-for="item in moduleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px" @click.stop="delTemplate(item.value)"><i class="el-icon-error"></i></span>
              </el-option>
            </el-select>
          </div>
        </div>
        <el-scrollbar class="scrollbar-wrap">
          <div class="template-content">
            <el-tree
              ref="tree"
              :data="jsonData"
              show-checkbox
              node-key="id"
              :default-checked-keys=defaultCheckId
              :props="defaultProps">
            </el-tree>
          </div>
        </el-scrollbar>
        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="saveAsTemplate">{{$t('filterResult.saveAs')}}</el-button>
          <el-button type="primary" @click="saveEdit">{{$t('filterResult.saveUpdate')}}</el-button>
        </div>
      </el-dialog>
      <el-dialog custom-class="saveAs-dialog" :title="$t('filterResult.CreateTemplate')" :visible.sync="dialogSaveAsVisible">
        <div class="content">
          <span>{{$t('filterResult.name')}}</span>
          <el-input v-model="templateName" :placeholder="$t('filterResult.inputName')"></el-input>
          <el-button type="primary" @click="checkTempName">{{$t('filterResult.create')}}</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import {getFilterParams} from '../../../utils/auth'
  import {getUsername, setFilterParams, getToken} from '../../../utils/auth'
  import {mapGetters} from 'vuex'
  import {AgGridVue} from "ag-grid-vue";
  import HeaderStatusCode from "../../../components/agGrid/HeaderStatusCode";
  import Vue from 'vue'

  export default {
    name: 'filterResult',
    components: {
      'ag-grid-vue': AgGridVue
    },
    data() {
      return {
        defaultCheckId: [],
        jsonData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        dialogSaveAsVisible: false,
        dialogCreateModuleVisible: false,
        moduleValue: '', // 创建模板中的绑定值
        templateName: '', // 外面头部切换模板绑定值
        templateName1: '',
        moduleOptions: [],

        EXPORT_TABLE_URL: process.env.EXPORT_TABLE_URL,
        showExportLoading: false,
        showExport: true,
        selectState:false,
        // 下载链接名称
        exportExcelFileName: '',
        // 表名修改
        tableName: 'dm_machine',
        transactionOptions: {
          postParams: [], //粘贴修改status comments的数据
          enableRangeSelection: true,
          rowSelection: 'multiple',
          context: {
            componentParent: this
          },
          onPasteStart: function (params) {
            this.postParams = []
            // console.log('Callback onPasteStart:' ,params);
          },
          onCellValueChanged: function (params) {
            this.postParams.push({
              'serialNumber': params.data.prod_sn,
              'statusCode': params.data.statusCode,
              'statusComments': params.data.statusComments,
              'machineType': params.data.prod_material,
              // 'changeUser': getUsername(),
              'resourceFlag': 'cbi'
            })
          },
          onPasteEnd: async function (params) {
            const _this = this.context.componentParent
            try {
              let res = await _this.changeStatus(this.postParams)
            } catch (err) {
              alert('修改失败，请刷新页面重试')
            }
            // console.log('Callback onPasteEnd:' ,params);
          },
          // 华
          onCellEditingStopped: async function (params) {
            let _this = this.context.componentParent
            this.postParams = [
              {
                'serialNumber': params.node.data.prod_sn,
                'statusCode': params.node.data.statusCode,
                'statusComments': params.node.data.statusComments,
                'machineType': params.node.data.prod_material,
                // 'changeUser': getUsername(),
                'resourceFlag': 'cbi'
              }
            ]
            // let postParams = [
            //   {
            //     'serialNumber': params.node.data.prod_sn,
            //     'statusCode': params.node.data.statusCode,
            //     'statusComments': params.node.data.statusComments,
            //     'machineType': params.node.data.prod_material,
            //     // 'changeUser': getUsername(),
            //     'resourceFlag': 'cbi'
            //   }
            // ]
            // try {
            //   let res = await _this.changeStatus(postParams)
            // } catch (err) {
            //   console.log(err)
            //   alert('修改失败请重试')
            // }
          },
          columnDefs:[
//            {
//              headerName: "DT FY16 End Rev",
//              field: "DT FY16 End Rev"
//            }
          ]
          // toolPanelSuppressRowGroups: true

        },
        activeColumn: '1',
//        customColumn: 1,
        toggle: '',
        params: {},
        // selectActiveNames: ['1'],
        selectActiveNames: ['0'],
        conditionParams: {},
        conditionParamsArr: [],
        conditionParamsOpt: {},
        // transaction权限控制
        filterTab: {
          permissions: {
            gp: false,
            gp_per: false,
            sdrev: false,
            bmc: false
          },
//          permissions: {
//            gp: true,
//            gp_per: true,
//            sdrev: true,
//            bmc: true
//          },
          tabLoading: true,
          filterTabData: [],
          search: '',
          page: null,
          total: null,
          pageSize: 100,
          currentPage: 1
        },
//原来的        tabHeight: window.innerHeight * 0.8,
        tabHeight: window.innerHeight * 0.7,
        // Time标志
        timeMarkDate: {
          billingDateMark: '',
          deliveryDateMark: '',
          soDateMark: '',
          serviceDateMark: ''
        },
        tableCheckbox: {
          showGp: false,
          showGp_per: false,
          showRevenue: false,
          showBmc: false,
          checkbox: {
            bpId: true,
            bpName: true,
            group: true,
            geo: true,
            region: true,
            country: true,
            industry: true,
            nielsonId: true,
            loyalty: true,
            bu: false,
            brand: false,
            productSeries: false,
            productFamily: false,
            material: false,
            sn: false,
            segment: false,
            so: false,
            billing: false,
            ca: true,
            revenue: true,
            gp: true,
            gp_per: true,
            bmc: true,
            // 新增
            billingItem: false,
            billingDate: false,
            distrChan: false,
            productGroup: false,
            billCreateDate: false,
            firstSell: false,
            materialDesc: false,
            countryName: false,
            productHierachy: false,
            businessGroup: false,
            pcaCost: false,
            dmu: false,
            fiscper: false,
            fisquar: false,
            deliveryNote: false,
            deliveryItem: false,
            deliveryDate: false,
            encryptSn: false,
            shipDate: false,
            arriveDate: false,
            soItem: false,
            oppId: false,
            oppItem: false,
            quotationNum: false,
            quotationItem: false,
            contractNum: false,
            contractItem: false,
            contractPrice: false,
            contractTotal: false,
            activationDate: false,
            activationCountry: false,
            activationProvince: false,
            activationCity: false,
            activationSource: false,
            activationQty: false,
            duration: false,
            isActivation: false,
            os: false,
            cpu: false,
            gpu: false,
            hardDiskDrive: false,
            memory: false,
            warStartDate: false,
            warEndDate: false
          },
          tableItem: {
            bpId: true,
            bpName: true,
            group: true,
            geo: true,
            region: true,
            country: true,
            industry: true,
            nielsonId: true,
            loyalty: true,
            bu: false,
            brand: false,
            productSeries: false,
            productFamily: false,
            material: false,
            sn: false,
            segment: false,
            so: false,
            billing: false,
            ca: true,
            billingItem: false,
            billingDate: false,
            distrChan: false,
            productGroup: false,
            billCreateDate: false,
            firstSell: false,
            materialDesc: false,
            countryName: false,
            productHierachy: false,
            businessGroup: false,
            pcaCost: false,
            dmu: false,
            fiscper: false,
            fisquar: false,
            deliveryNote: false,
            deliveryItem: false,
            deliveryDate: false,
            encryptSn: false,
            shipDate: false,
            arriveDate: false,
            soItem: false,
            oppId: false,
            oppItem: false,
            quotationNum: false,
            quotationItem: false,
            contractNum: false,
            contractItem: false,
            contractPrice: false,
            contractTotal: false,
            activationDate: false,
            activationCountry: false,
            activationProvince: false,
            activationCity: false,
            activationSource: false,
            activationQty: false,
            duration: false,
            isActivation: false,
            os: false,
            cpu: false,
            gpu: false,
            hardDiskDrive: false,
            memory: false,
            warStartDate: false,
            warEndDate: false
          }
        },
        postParams: [],
        itemsToUpdate: []
      }
    },
    methods: {
      templateChange(){
        if(!this.showExport){
          this.showExport=true
        }
        this.conditionParams['tempid']=this.templateName1;
        this.clearSearch();
      },
      async delTemplate(id) {
        let _this=this;
        let params={
          tablename: 'dm_machine',
          username: getUsername(),
          tempid: id
        };
        let res=await _this.axios.post('expTemp/delExpTempByExpTempName.do',params);
        let resData = res.data.data;
        if(resData.success==='true'){
          this.$message({
            message:this.$t('filterResult.templateTips.deletedSuc'),
            type: 'success'
          });
          _this.moduleValue='';
          _this.$refs.tree.setCheckedKeys([])
        }else {
          alert(this.$t('filterResult.templateTips.deletedFail'))
        }
        _this.getTemplateList();
      },
      // 选择模板
      async changeTemplate(value) {
        let tempId = value
        let params = {
          tablename: 'dm_machine',
          username: getUsername(),
          tempid: tempId
        }
        let res = await this.axios.post('expTemp/getExpTempFieldNameByTempName.do', params)
        let resData = res.data.data.data
        this.defaultCheckId = resData[0].children.map(item => item.id)
        // console.log(this.defaultCheckId)
        this.$refs.tree.setCheckedKeys(this.defaultCheckId)
      },
      // 模板列表
      async getTemplateList() {
        let params = {
          tablename: 'dm_machine',
          username: getUsername(),
        }
        let res = await this.axios.post('expTemp/getExpTempList.do', params)
        let resData = res.data.data
        let templateName = resData.templateNames
        let templateId = resData.tempIds
        console.log(resData,'getTemplateList');
        let temporaryArr = []
        for (let i in templateName) {
          temporaryArr.push({label: templateName[i], value: templateId[i]})
        }
        this.moduleOptions = temporaryArr
      },
      // created所有字段
      async getAllField() {
        let params = {
          tablename: 'dm_machine',
          username: getUsername(),
        }
        let res = await this.axios.post('expTemp/getFieldByTableName.do', params)
        this.jsonData = res.data.data.jsonData
        console.log(this.jsonData,888)
      },
      createModule() {
        this.dialogCreateModuleVisible = true;
        this.moduleValue='';
        if(!this.showExport){
          this.showExport=true
        }
        setTimeout(()=>{
          this.$refs.tree.setCheckedKeys([]);
        },100)
      },
      // 对模板字段编辑后进行的操作
      saveAsTemplate() {
        // this.dialogCreateModuleVisible = false
        // this.$refs.tree.setCheckedKeys([5, 6])
        // console.log(this.$refs.tree.getCheckedKeys())
        if(this.$refs.tree.getCheckedKeys().length===0){
          this.$message({
            message: this.$t('filterResult.templateTips.saveAsWaring'),
            type: 'warning'
          })
        }else {
          this.templateName = ''
          this.dialogSaveAsVisible = true
        }
      },
      // 保存修改
      async saveEdit() {
        // this.dialogSaveAsVisible = true
        let params = {
          tablename: 'dm_machine',
          username: getUsername(),
          tempid: this.moduleValue,
          fieldid: this.$refs.tree.getCheckedKeys(),
        }
        if(!this.moduleValue){
          this.$message({
            message: this.$t('filterResult.templateTips.saveUpdateWaring'),
            type: 'warning'
          })
        }else {
          let res = await this.axios.post('expTemp/insertOrModifyExpTempAndField.do', params)
          if (res.data.data.success === 'true') {
            this.$message({
              message: this.$t('filterResult.templateTips.templateSaveSuc'),
              type: 'success'
            })
          } else {
            alert(this.$t('filterResult.templateTips.templateSaveFail'))
          }
        }
      },
      // 校验名字
      async checkTempName() {
        let params = {
          tablename: 'dm_machine',
          username: getUsername(),
          tempName: this.templateName,
        }
        if(!this.templateName){
          this.$message({
            message: this.$t('filterResult.templateTips.templateNameWaring'),
            type: 'warning'
          })
        }else {
          let res = await this.axios.post('expTemp/checkTempName.do', params)
          if (res.data.data.success === 'true') {
            this.createTemplate()
          } else {
            this.$message.error(this.$t('filterResult.templateTips.sameName'))
          }
        }
      },
      // 创建模板
      async createTemplate() {
        let params = {
          tablename: 'dm_machine',
          username: getUsername(),
          tempName: this.templateName,
          fieldid: this.$refs.tree.getCheckedKeys(),
        }
        let res = await this.axios.post('expTemp/insertOrModifyExpTempAndField.do', params)
         console.log(params,'params')
        // console.log(res.data.data)
        if (res.data.data.success === 'true') {
          this.$message({
            message: this.$t('filterResult.templateTips.templateCreateSuc'),
            type: 'success'
          })
          this.$refs.tree.setCheckedKeys([]);
          this.getTemplateList()
        } else {
          alert(this.$t('filterResult.templateTips.templateCreateFail'))
        }
        this.dialogSaveAsVisible = false
      },
      selectStateChange(){
        if(this.conditionParamsArr.length!==0){
          this.selectState=!this.selectState
        }else {
          this.selectState=false
        }
      },
      async exportMethods() {
        const _this = this
        this.showExportLoading = true
        let params = this.conditionParams
        params['tempid']=_this.templateName1;
        let res = await this.axios.post('filtersearch/dmMachineExport', params, {timeout: 300000})
        // console.log('导出测试')
        // console.log(res)
        let resData = res.data.data
//        this.exportExcelFileName = `https://exports.cbitest.lenovo.com/${resData}`
        this.exportExcelFileName = `${this.EXPORT_TABLE_URL}/${resData}`
        // console.log(this.exportExcelFileName)
        this.$message.success(_this.$t('filterResult.message'))
        this.showExportLoading = false
        this.showExport = false
      },
      createColumn(data) {
        const _this = this
        for(let key in data[0]){
          let obj={};
          obj['headerName']=key;
          obj['field']=key;
          this.transactionOptions.columnDefs.push(obj)
        }
//        data.forEach((item,index)=>{
//            let obj={};
//            obj['headerName']=item;
//            obj['field']=item;
//            this.transactionOptions.columnDefs.push(obj)
//        })
        _this.transactionOptions.api.setColumnDefs(this.transactionOptions.columnDefs)
      },
      methodFromParent(selectData) { // 获取表格icon对应的id
        this.changeStatusCodeData(selectData)
      },
      gridSelectFunc(params) {
        return ''
      },
      async submitState() {
        const _this = this
        this.itemsToUpdate = this.transactionOptions.api.getSelectedRows()
        if(!this.itemsToUpdate.length) {
          this.$alert( _this.$t('filterResult.tipsContent.needSelect'), _this.$t('filterResult.tips'), {
            confirmButtonText: _this.$t('filterResult.OK'),
            callback: action => {

            }
          })
          return false
        }
        // let postParams = []
        let isDCG = this.itemsToUpdate.every(item => {
          return item.prod_biz_group.toString() == 'DCG'
        })

        let isEmptySn = this.itemsToUpdate.some(item => {
          return item.prod_sn === ''
        })
        if (!isDCG){
          this.$alert( _this.$t('filterResult.tipsContent.notDCG'), _this.$t('filterResult.tips'), {
            confirmButtonText: _this.$t('filterResult.OK'),
            callback: action => {

            }
          })
          return false
        }

        if (isEmptySn){
          this.$alert(_this.$t('filterResult.tipsContent.SNEmpty'), _this.$t('filterResult.tips'), {
            confirmButtonText: _this.$t('filterResult.OK'),
            callback: action => {

            }
          })
          return false
        }

        for (let i in this.itemsToUpdate) {
          this.postParams.push({
            'serialNumber': this.itemsToUpdate[i].prod_sn,
            'statusCode': this.itemsToUpdate[i].statusCode,
            'statusComments': this.itemsToUpdate[i].statusComments,
            'machineType': this.itemsToUpdate[i].prod_material,
            // 'changeUser': getUsername(),
            'resourceFlag': 'cbi'
          })
        }
        // console.log('要穿的参数')
        // console.log(this.postParams)
        let res = await this.changeStatus(this.postParams)
        // console.log(res)

        if (res.data.status === 200) {
          if(res.data.data.metaData.length === 0) {
            this.$alert(_this.$t('filterResult.tipsContent.noPermission'), _this.$t('filterResult.tips'), {
              confirmButtonText: _this.$t('filterResult.OK'),
              callback: action => {

              }
            })
          } else {
            this.$message({
              message: _this.$t('filterResult.tipsContent.submitSuccess'),
              type: 'success'
            });
          }
        } else {
          this.$message.error(_this.$t('filterResult.tipsContent.submitFailed'));
        }
        this.postParams = []
        this.itemsToUpdate = []
      },
      async changeStatusCodeData(selectData) {
        const _this = this
        // var itemsToUpdate = [];
        var itemsToReset = [];
        // console.log(this.gridOptions.api.getSelectedRows())
        // console.log(this.gridOptions.api.getSelectedNodes())
        this.transactionOptions.api.getSelectedRows().forEach(function (item, index) {
          if (item.prod_biz_group == 'DCG') {
            item.statusCode = selectData;
          }
        })
        // this.itemsToUpdate = this.transactionOptions.api.getSelectedRows()
        // // console.log(itemsToUpdate)
        // // let postParams = []
        // for (let i in this.itemsToUpdate) {
        //   this.postParams.push({
        //     'serialNumber': this.itemsToUpdate[i].prod_sn,
        //     'statusCode': this.itemsToUpdate[i].statusCode,
        //     'statusComments': this.itemsToUpdate[i].statusComments,
        //     'machineType': this.itemsToUpdate[i].prod_material,
        //     // 'changeUser': getUsername(),
        //     'resourceFlag': 'cbi'
        //   })
        // }
        // console.log(postParams)
        // try {
        //   let res = await this.changeStatus(postParams)
        //   this.transactionOptions.api.updateRowData({update: itemsToUpdate});
        // } catch (err) {
        //
        // }
        this.transactionOptions.api.updateRowData({update: this.itemsToUpdate})
        // this.transactionOptions.api.deselectAll()
      },
      changeStatus(postParams) {
        return new Promise(async (resolve, reject) => {
          try {
            let res = await this.axios.post('/filtersearch/modefyStutas.do', {json: postParams})
            resolve(res)
          } catch (err) {
            reject(err)
          }
        })
      },
      clearSearch(value) {
//        console.log('测试开始')
//        console.log(value)
//        console.log(this.conditionParams)
        this.filterTab.tabLoading = true
        const _this = this
        if (value) {
          for (var key in this.conditionParams) {
            if (value === key) {
              delete this.conditionParams[value];
              _this.conditionParamsArr=_this.conditionParamsArr.filter(item=>item!==value)
            }
          }
        }
        _this.conditionParamsArr.length===0?_this.selectState=false:null;
        this.axios.post('/filtersearch/dmMachineSearch', this.conditionParams).then(response => {
          if (response.data.status === 200) {
            const resData = response.data.data
            _this.filterTab.filterTabData = resData.data
            _this.transactionOptions.api.setRowData(_this.filterTab.filterTabData)
            var allColumnIds = [] //设置表格自动撑开
            _this.transactionOptions.columnApi.getAllColumns().forEach(function (column) {
              allColumnIds.push(column.colId);
            })
            //设置显示的列
            let list = [];
            for (let key in resData.data[0]) {
              list.push(key);
            }
            list.forEach(item => {
              this.transactionOptions.columnApi.setColumnVisible(item, true)
              if (allColumnIds.indexOf(item) >= 0) {
                allColumnIds.splice(allColumnIds.indexOf(item), 1)
              }
            })
            this.transactionOptions.columnApi.setColumnsVisible(allColumnIds, false);

            _this.transactionOptions.columnApi.autoSizeColumns(allColumnIds)
            _this.filterTab.page = resData.page
            _this.filterTab.total = resData.total
//            _this.filterTab.total = resData.pageSize
            _this.filterTab.tabLoading = false
//            _this.conditionParams = resData.condition
            // console.log('再次的conditionParams数据')
            // console.log(_this.conditionParams)
          }
        }).catch(error => {
          console.log(error)
          alert('获取数据失败，请刷新或重试')
        })
      },
      symbolChange(nVal) {
        if (nVal === 'eq') {
          return '='
        }
        if (nVal === 'neq') {
          return '≠'
        }
        if (nVal === 'gt') {
          return '>'
        }
        if (nVal === 'gte') {
          return '≥'
        }
        if (nVal === 'lt') {
          return '<'
        }
        if (nVal === 'lte') {
          return '≤'
        }
        if (nVal === 'notcontain') {
          return 'NOT CONTAIN'
        }
        if (nVal === 'contain') {
          return 'CONTAIN'
        }
        if (nVal === 'between') {
          return 'BETWEEN'
        }
        if (nVal === '') {
          return ''
        }
      },
      fallBack() {
        this.$router.go(-1)
      },
      loadFilterSearch() {
        const _this = this
        // console.log('------------')
        this.axios.post('/filtersearch/dmMachineSearch', _this.params).then(response => {
          if (response.data.status === 200) {
            const resData = response.data.data
            // console.log('这是跳转到filterSearch页后的数据')

            // 表头排序
//            let handleTitleData = resData.title
//            handleTitleData.sort(function(a, b) {
//              return a.substring(0, a.indexOf('@')) -b.substring(0, b.indexOf('@'))
//            })
//            this.createColumn(handleTitleData)
            this.createColumn(resData.data)

            _this.filterTab.filterTabData = resData.data
            _this.transactionOptions.api.setRowData(_this.filterTab.filterTabData)
            var allColumnIds = [] //设置表格自动撑开
            _this.transactionOptions.columnApi.getAllColumns().forEach(function (column) {
              // 设置不自动撑开选择框
              if (column.colId !== 'selection') {
                allColumnIds.push(column.colId);
              }
            })
            _this.transactionOptions.columnApi.autoSizeColumns(allColumnIds)
            _this.filterTab.page = resData.page
            _this.filterTab.total = resData.total
//            _this.filterTab.total = resData.pageSize
            _this.filterTab.tabLoading = false
            _this.conditionParams = resData.condition;
            for(let key in _this.conditionParams){
              if (_this.conditionParams.hasOwnProperty(key)) {
                if(key!=='page'&&key!=='pageSize'&&key!=='tablename'&&key!=='username'){
                  _this.conditionParamsArr.push(key);
                }
              }
            }
            // console.log(_this.conditionParams, '******')
          }
        }).catch(error => {
          console.log(error)
          alert('获取数据失败，请刷新或重试')
        })
      },
      handleSizeChange3(val) {
        this.filterTab.tabLoading = true
//        this.params.pageSize = val
//        this.loadFilterSearch()
        this.conditionParams.page = 1;
        this.conditionParams.pageSize = val
        this.clearSearch()
      },
      handleCurrentChange3(val) {
        this.filterTab.tabLoading = true
//        this.params.page = val
//        this.loadFilterSearch()

        this.conditionParams.page = val
        this.clearSearch()
      },

      showTab(params) {
        if (params.tablename === 'transaction') {
          this.toggle = 'transaction'
        } else if(params.tablename === 'service'){
          // service条件下
          this.toggle = 'service'
        }else {
          this.toggle = 'cbd'
        }
      },
      // 只搭配监听，转换标志
      timeMarkChange(nVal) {
        if (nVal === 'billing_year_fis' || nVal === 'delivery_gi_year_fis' || nVal === 'sales_order_create_year_fis' || nVal === 'create_year_fis') {
          return 'FY'
        } else if (nVal === 'billing_month_fis' || nVal === 'delivery_gi_month_fis' || nVal === 'so_fis_month' || nVal === 'sales_order_create_month_fis') {
          return 'FM'
        } else if (nVal === 'billing_quarter_fis' || nVal === 'delivery_gi_quarter_fis' || nVal === 'sales_order_create_quarter_fis' || nVal === 'create_quarter_fis') {
          return 'FQ'
        } else if (nVal === 'billing_year' || nVal === 'delivery_gi_year' || nVal === 'sales_order_create_year' || nVal === 'create_year') {
          return 'Year'
        } else if (nVal === 'billing_month' || nVal === 'delivery_gi_month' || nVal === 'sales_order_create_month' || nVal === 'create_month') {
          return 'Month'
        } else if (nVal === 'billing_week' || nVal === 'delivery_gi_week' || nVal === 'sales_order_create_week' || nVal === 'create_week') {
          return 'Week'
        } else if (nVal === 'billing_date' || nVal === 'delivery_gi_date' || nVal === 'sales_order_create_date' || nVal === 'createtime') {
          return 'Day'
        } else if (nVal === 'billing_quarter' || nVal === 'delivery_gi_quarter' || nVal === 'sales_order_create_quarter' || nVal === 'create_quarter_fis') {
          return 'Quarter'
        }
      },
      // 自选列
      showBpID(value) {
        this.tableCheckbox.tableItem.bpId = value
      },
      showBpName(value) {
        this.tableCheckbox.tableItem.bpName = value
      },
      showGroup(value) {
        this.tableCheckbox.tableItem.group = value
      },
      showGeo(value) {
        this.tableCheckbox.tableItem.geo = value
      },
      showRegion(value) {
        this.tableCheckbox.tableItem.region = value
      },
      showCountry(value) {
        this.tableCheckbox.tableItem.country = value
      },
      showIndustry(value) {
        this.tableCheckbox.tableItem.industry = value
      },
      showNielsonId(value) {
        this.tableCheckbox.tableItem.nielsonId = value
      },
      showLoyalty(value) {
        this.tableCheckbox.tableItem.loyalty = value
      },
      showBu(value) {
        this.tableCheckbox.tableItem.bu = value
      },
      showBrand(value) {
        this.tableCheckbox.tableItem.brand = value
      },
      showProductSeries(value) {
        this.tableCheckbox.tableItem.productSeries = value
      },
      showProductFamily(value) {
        this.tableCheckbox.tableItem.productFamily = value
      },
      showMaterial(value) {
        this.tableCheckbox.tableItem.material = value
      },
      showSn(value) {
        this.tableCheckbox.tableItem.sn = value
      },
      showSegment(value) {
        this.tableCheckbox.tableItem.segment = value
      },
      showSo(value) {
        this.tableCheckbox.tableItem.so = value
      },
      showBilling(value) {
        this.tableCheckbox.tableItem.billing = value
      },
      showCa(value) {
        this.tableCheckbox.tableItem.ca = value
      },
      showRevenue(value) {
        this.filterTab.permissions.sdrev = value
//        this.tableCheckbox.tableItem.revenue = value
      },
      showGp(value) {
        this.filterTab.permissions.gp = value
//        this.tableCheckbox.tableItem.gp = value
      },
      showGp_per(value) {
        this.filterTab.permissions.gp_per = value
//        this.tableCheckbox.tableItem.gp_per = value
      },
      showBmc(value) {
        this.filterTab.permissions.bmc = value
      },
      showBillingItem(value) {
        this.tableCheckbox.tableItem.billingItem = value
      },
      showBillingDate(value) {
        this.tableCheckbox.tableItem.billingDate = value
      },
      showDistrChan(value) {
        this.tableCheckbox.tableItem.distrChan = value
      },
      showProductGroup(value) {
        this.tableCheckbox.tableItem.productGroup = value
      },
      showBillCreateDate(value) {
        this.tableCheckbox.tableItem.billCreateDate = value
      },
      showFirstSell(value) {
        this.tableCheckbox.tableItem.firstSell = value
      },
      showMaterialDesc(value) {
        this.tableCheckbox.tableItem.materialDesc = value
      },
      showCountryName(value) {
        this.tableCheckbox.tableItem.countryName = value
      },
      showProductHiera(value) {
        this.tableCheckbox.tableItem.productHierachy = value
      },
      showBusinessGroup(value) {
        this.tableCheckbox.tableItem.businessGroup = value
      },
      showPcaCost(value) {
        this.tableCheckbox.tableItem.pcaCost = value
      },
      showDmu(value) {
        this.tableCheckbox.tableItem.dmu = value
      },
      showFiscper(value) {
        this.tableCheckbox.tableItem.fiscper = value
      },
      showFisquar(value) {
        this.tableCheckbox.tableItem.fisquar = value
      },
      showDeliveryNote(value) {
        this.tableCheckbox.tableItem.deliveryNote = value
      },
      showDeliveryItem(value) {
        this.tableCheckbox.tableItem.deliveryItem = value
      },
      showDeliveryDate(value) {
        this.tableCheckbox.tableItem.deliveryDate = value
      },
      showEncryptSn(value) {
        this.tableCheckbox.tableItem.encryptSn = value
      },
      showShipDate(value) {
        this.tableCheckbox.tableItem.shipDate = value
      },
      showArriveDate(value) {
        this.tableCheckbox.tableItem.arriveDate = value
      },
      showSoItem(value) {
        this.tableCheckbox.tableItem.soItem = value
      },
      showOppId(value) {
        this.tableCheckbox.tableItem.oppId = value
      },
      showOppItem(value) {
        this.tableCheckbox.tableItem.oppItem = value
      },
      showquotationNum(value) {
        this.tableCheckbox.tableItem.quotationNum = value
      },
      showQuotationItem(value) {
        this.tableCheckbox.tableItem.quotationItem = value
      },
      showContractNum(value) {
        this.tableCheckbox.tableItem.contractNum = value
      },
      showContractItem(value) {
        this.tableCheckbox.tableItem.contractItem = value
      },
      showContractPrice(value) {
        this.tableCheckbox.tableItem.contractPrice = value
      },
      showContractTotal(value) {
        this.tableCheckbox.tableItem.contractTotal = value
      },
      showActivationDate(value) {
        this.tableCheckbox.tableItem.activationDate = value
      },
      showActivationCountry(value) {
        this.tableCheckbox.tableItem.activationCountry = value
      },
      showActivationProvince(value) {
        this.tableCheckbox.tableItem.activationProvince = value
      },
      showActivationCity(value) {
        this.tableCheckbox.tableItem.activationCity = value
      },
      showActivationSource(value) {
        this.tableCheckbox.tableItem.activationSource = value
      },
      showActivationQty(value) {
        this.tableCheckbox.tableItem.activationQty = value
      },
      showDuration(value) {
        this.tableCheckbox.tableItem.duration = value
      },
      showIsActivation(value) {
        this.tableCheckbox.tableItem.isActivation = value
      },
      showOs(value) {
        this.tableCheckbox.tableItem.os = value
      },
      showCpu(value) {
        this.tableCheckbox.tableItem.cpu = value
      },
      showGpu(value) {
        this.tableCheckbox.tableItem.gpu = value
      },
      showHardDiskDrive(value) {
        this.tableCheckbox.tableItem.hardDiskDrive = value
      },
      showMemory(value) {
        this.tableCheckbox.tableItem.memory = value
      },
      showWarStartDate(value) {
        this.tableCheckbox.tableItem.warStartDate = value
      },
      showWarEndDate(value) {
        this.tableCheckbox.tableItem.warEndDate = value
      }
    },
    watch: {
      // 表格名字
      'conditionParams.tablename': function (nVal) {
        if (nVal === 'transaction') {
          this.tableName = 'cbi_document_flow & cbi_bp'
        } else if (nVal === 'service') {
          this.tableName = 'services_claim & cbi_bp'
        }
      },

      'filterTab.search': function () {
        this.transactionOptions.api.setQuickFilter(this.filterTab.search)
      },
      'filterTab.permissions.gp': function (nVal) {
        this.tableCheckbox.showGp = true
        // console.log(1)
      },
      'filterTab.permissions.gp_per': function (nVal) {
        // console.log(2)
        this.tableCheckbox.showGp_per = true
      },
      'filterTab.permissions.sdrev': function (nVal) {
        this.tableCheckbox.showRevenue = true
        // console.log(3)
      },
      'filterTab.permissions.bmc': function (nVal) {
        this.tableCheckbox.showBmc = true
//        console.log(4)
      },
      'conditionParams.authority_geo.opt': function (nVal) {
        this.conditionParamsOpt.geoOpt = this.symbolChange(nVal)
      },
      'conditionParams.sell_in_region.opt': function (nVal) {
        this.conditionParamsOpt.regionOpt = this.symbolChange(nVal)
      },
      'conditionParams.sell_in_country.opt': function (nVal) {
        this.conditionParamsOpt.countryOpt = this.symbolChange(nVal)
      },
      'conditionParams.sold_to_group.opt': function (nVal) {
        this.conditionParamsOpt.groupOpt = this.symbolChange(nVal)
      },
      'conditionParams.sold_to.opt': function (nVal) {
        this.conditionParamsOpt.bpIdOpt = this.symbolChange(nVal)
      },
      'conditionParams.sold_to_name.opt': function (nVal) {
        this.conditionParamsOpt.bpNameOpt = this.symbolChange(nVal)
      },
      'conditionParams.industry.opt': function (nVal) {
        this.conditionParamsOpt.industryOpt = this.symbolChange(nVal)
      },
      'conditionParams.nielsen_id.opt': function (nVal) {
        this.conditionParamsOpt.nielsenIdOpt = this.symbolChange(nVal)
      },
      'conditionParams.loyalty.opt': function (nVal) {
        this.conditionParamsOpt.loyaltyOpt = this.symbolChange(nVal)
      },
      'conditionParams.gross_profit_scale.opt': function (nVal) {
        this.conditionParamsOpt.scaleOpt = this.symbolChange(nVal)
      },
      'conditionParams.cross_buy.opt': function (nVal) {
        this.conditionParamsOpt.crossBuyOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_biz_group.opt': function (nVal) {
        this.conditionParamsOpt.bgOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_final_bu.opt': function (nVal) {
        this.conditionParamsOpt.buOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_brand.opt': function (nVal) {
        this.conditionParamsOpt.brandOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_series.opt': function (nVal) {
        this.conditionParamsOpt.productSeriesOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_family.opt': function (nVal) {
        this.conditionParamsOpt.productFamilyOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_material.opt': function (nVal) {
        this.conditionParamsOpt.materialOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_sn.opt': function (nVal) {
        this.conditionParamsOpt.snOpt = this.symbolChange(nVal)
      },
      'conditionParams.ebr_segment.opt': function (nVal) {
        this.conditionParamsOpt.segmentOpt = this.symbolChange(nVal)
      },
      'conditionParams.sales_order_num.opt': function (nVal) {
        this.conditionParamsOpt.soOpt = this.symbolChange(nVal)
      },
      'conditionParams.billing_num.opt': function (nVal) {
        this.conditionParamsOpt.billingOpt = this.symbolChange(nVal)
      },
      'conditionParams.sell_in_qty.opt': function (nVal) {
        this.conditionParamsOpt.caOpt = this.symbolChange(nVal)
      },
      'conditionParams.gross_profit.opt': function (nVal) {
        this.conditionParamsOpt.gpOpt = this.symbolChange(nVal)
      },
      'conditionParams.gross_profit_percent.opt': function (nVal) {
        this.conditionParamsOpt.gp2Opt = this.symbolChange(nVal)
      },
      'conditionParams.sdrev.opt': function (nVal) {
        this.conditionParamsOpt.revenueOpt = this.symbolChange(nVal)
      },
      'conditionParams.billing_date.opt': function (nVal) {
        this.conditionParamsOpt.billingDateOpt = this.symbolChange(nVal)
      },
      'conditionParams.delivery_gi_date.opt': function (nVal) {
        this.conditionParamsOpt.deliveryDateOpt = this.symbolChange(nVal)
      },
      'conditionParams.sales_order_create_date.opt': function (nVal) {
        this.conditionParamsOpt.soDateOpt = this.symbolChange(nVal)
      },
      'conditionParams.createtime.opt': function (nVal) {
        this.conditionParamsOpt.serviceDateOpt = this.symbolChange(nVal)
      },

      'conditionParams.billing_date.tips': function (nVal) {
        this.timeMarkDate.billingDateMark = this.timeMarkChange(nVal)
      },
      'conditionParams.delivery_gi_date.tips': function (nVal) {
        this.timeMarkDate.deliveryDateMark = this.timeMarkChange(nVal)
      },
      'conditionParams.sales_order_create_date.tips': function (nVal) {
        this.timeMarkDate.soDateMark = this.timeMarkChange(nVal)
      },
      'conditionParams.createtime.tips': function (nVal) {
        this.timeMarkDate.serviceDateMark = this.timeMarkChange(nVal)
      }
    },
    beforeMount() {
      var str2 = getFilterParams()
      this.params = JSON.parse(str2)
      this.params.page = this.filterTab.currentPage
      this.params.pageSize = this.filterTab.pageSize
      this.showTab(this.params)
//      this.createColumn()
      this.loadFilterSearch();
      this.getTemplateList()
      this.getAllField()
    },
    mounted() {
//      console.log(getFilterParams())
//       console.log('这是filter传过来的搜索params')
      // console.log(this.params)
//      this.loadFilterSearch()
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ])
    }
  }

  function numSort(data1, data2) {
    var Number1 = parseFloat(data1) || data1
    var Number2 = parseFloat(data2) || data2
    if (!!Number1 === !!null && !!Number2 === !!null) {
      return 0
    }
    if (!!Number1 === !!null) {
      return -1
    }
    if (!!Number2 === !!null) {
      return 1
    }
    return Number1 - Number2
  }

  function moneyThousandth(params) {
    if(params.value == undefined) {
      return
    }
    // console.log(params.value)
    // return comdify(parseFloat(params.value).toFixed(2).toString())
    if (params.value.toString() == '0' || params.value.toString() == '') {
      return params.value.toString()
    } else {
      // return comdify(parseFloat(params.value).toString())
      return comdify(parseFloat(params.value).toFixed(2))
    }
  }

  function comdify(n) {
    var re = /\d{1,3}(?=(\d{3})+$)/g;
    var n1 = n.replace(/^(^-?\d+)((\.\d+)?)$/, function (s, s1, s2) {

      return s1.replace(re, "$&,") + s2
    })
    return n1
  }
</script>

<style lang="scss" scoped>
  .column-icon {
    color: #959595;
    cursor: pointer;
    &:hover {
      color: #1E90FF;
      cursor: pointer;
    }
  }

  .column-title {
    h3 {
      cursor: pointer;
      margin: 0;
      padding: 0;
      padding-bottom: 10px;
      &:hover {
        color: #f33;
      }
    }
  }

  .column-content {
    padding-top: 10px;
  }

  .filter-result {
    overflow: hidden;
    padding: 20px 35px 10px;
    /*background-color: #090;*/
    /*.filter-tag {*/
    /*width: 100%;*/
    /*height: 100px;*/
    /*background-color: #f00;*/
    /*}*/
    .breadcrumb-link {
      color: #39f;
      margin-bottom: 10px;
      font-size: 14px;
      font-family: MicorsoftYaHei;
    }
    .select-module {
      padding: 10px 20px;
      /*transition: height 2s;*/
      .el-card__body{
        padding: 0;
      }
      .select-box{
         border: 1px solid #cccccc;
        border-radius: 6px;
        .select-content {
          padding: 15px 0;
          background-color: #efefef;
          color: #999;
          margin-bottom: 20px;
          .content-box{
            position: relative;
            .tag-title {
              position: absolute;
              top: 3px;
              display: inline-block;
              width: 120px;
              color: #010101;
              font-family: "Helvetica Neue";
              font-size: 14px;
              font-weight: bold;
              margin-left: 10px;
            }
            .el-tag{
              border: none;
              font-size:14px ;
              color: #999;
              font-family: "Helvetica Neue LTStd-ThCn";
              background-color: transparent;
              margin-left: 120px;
              padding: 0;
            }
          }
        }
      }
      .footer-icon {
        padding-bottom: 8px;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        font-family: MicorsoftYaHei;
        color: #ccc;
      }
    }
    .maincontainerclose {
      /*width: calc(100vw - 210px);*/
      width: calc(100vw - 200px);
      transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out;
    }
    .mainContainerOpen {
      /*width: calc(100vw - 67px);*/
      width: calc(100vw - 47px);
      transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out;
    }
    .selected {
      background: #fff;
      width: 100%;
      /*h3 {*/
      /*margin: 0;*/
      /*padding: 5px 0 5px 5px;*/
      /*color: #959595;*/
      /*}*/
      .icon-guanbi {
        color: #959595;
        font-size: 14px;
        cursor: pointer;
        margin-left: 5px;
      }
      .icon-guanbi:hover {
        color: #409EFF;
      }
      .el-col {
        div {
          /*  height: 40px;*/
          /*width: 92%;*/
          padding: 5px 10px;
          border: 1px solid #0090e9;
          border-radius: 10px;
          display: inline-block;
          /*display: block;*/
          line-height: 28px;
          margin-bottom: 10px;
          .el-tag {
            position: relative;
            /*top: -2px;*/
            font-size: 12px;
            min-height: 32px;
          }
        }
      }
    }
    .return {
      display: inline-block;
      font-size: 16px;
      float: right;
      cursor: pointer;
      color: #1e90ff;
      .icon-houtui {
        font-size: 20px;
      }
    }
    .filter-tag {
      margin-top: 50px;
      padding-top: 33px;
      background-color: #fff;
      .tag-title {
        padding: 0 2vw;
      }
      .tag {
        /*padding: 10px;*/
        padding: 10px 2vw;
      }

    }
    .result-table {
      /*height: 500px;*/
      /*background-color: #3a8ee6;*/
      position: relative;
      margin-top: 20px;
      .f-r {
        float: right;
        /*margin-top: 3vh;*/
        margin-top: 1vh;
        padding-bottom: 1vh;
      }
      .result-header{
        padding:0 0 5px 0;
        background: #ffffff;
        border-radius: 4px 4px 0 0;
        .export-div, .create-div {
          display: inline-block;
          /*position: absolute;*/
          right: 15px;
          top: 20px;
          .el-button{
            font-size: 16px;
            padding:11px 25px;
          }
          .export-button{
            background: #3399ff;
            &:hover{
              background: #5d83cf;
            }
          }
          .down-button{
            background: #66cc99;
            border: none;
            padding: 0 15px;
            font-size:15px;
            &:hover{
              background: #51b181;
            }
          }
        }
        .create-div {
          right: 115px;
          .el-button {
            margin-right: 5px;
          }
          .el-select {
            width: 120px;
            margin-right: 5px;
          }
        }
      }
    }
    // 清除浮动，解决footer布局上浮混乱问题
    .result-table:after {
      display: block;
      content: '';
      clear: both;
    }
    .create-dialog {
      h2, .select-template {
        display: inline-block;
      }
      .select-template {
        position: relative;
        /*left: 150px;*/
        left: 30%;
      }
      .scrollbar-wrap {
        height: 500px;
      }
    }
    .saveAs-dialog {
      span {
        margin-right: 10px;
      }
      .el-input {
        width: 70%;
        margin-right: 50px;
      }
    }
  }
</style>
